// mixins for button
// ------------------------
.button-size(@padding; @font-size; @border-radius) {
	padding: @padding;
	font-size: @font-size;
	border-radius: @border-radius;
}

.button-variant(@color; @background; @border) {
	.button-color(@color; @background; @border);

	&:hover,
	&:focus {
		.button-color(tint(@color, 20%); tint(@background, 20%); tint(@border, 20%));
	}
	&:active,
	&.active {
		.button-color(shade(@color, 5%); shade(@background, 5%); shade(@background, 5%));
	}
	/* &.disabled,
	&[disabled],
	fieldset[disabled] & {
		&,
		&:hover,
		&:focus,
		&:active,
		&.active {
			.button-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border);
		}
	} */
}

.button-color(@color; @background; @border) {
	color: @color;
	background-color: @background;
	border-color: @border;
}

.btn() {
	margin-bottom: 0;
	font-weight: @btn-font-weight;
	text-align: center;
	// vertical-align: middle;
	touch-action: manipulation;
	cursor: pointer;
	background-image: none;
	border: 1px solid transparent;
	// outline: none;
	white-space: nowrap;
	line-height: @line-height-base;
	.button-size(@btn-padding-base; @font-size-base; @border-radius-base);
	user-select: none;
	// transform: translate3d(0, 0, 0);

	> .@{iconfont-css-prefix} {
		line-height: 1;
	}

	&,
	&:active,
	&:focus {
		outline: 0;
	}

	&:not([disabled]):hover {
		text-decoration: none;
	}

	&:not([disabled]):active {
		outline: 0;
		transition: none;
	}

	&.disabled,
	&[disabled] {
		cursor: @cursor-disabled;
		> * {
			pointer-events: none;
		}
	}

	&-lg {
		.button-size(@btn-padding-lg; @btn-font-size-lg; @border-radius-base);
	}

	&-sm {
		.button-size(@btn-padding-sm; @font-size-base; @border-radius-sm);
	}
}

